import 'package:flutter/material.dart';
import 'package:flutter_layout/base/index.dart';

class ShapePage extends StatefulWidget {
  const ShapePage({Key? key}) : super(key: key);

  @override
  _ShapePageState createState() => _ShapePageState();
}

class _ShapePageState extends State<ShapePage> {
  int currentIndex = 0;
  PageController pageController = PageController();

  var listPage = [
    const CachePage(
      title: "1",
    ),
    const CachePage(
      title: "2",
    ),
    // CachePage(
    //   title: "3",
    // ),
    // CachePage(
    //   title: "4",
    // ),
    // CachePage(
    //   title: "5",
    // ),
    // CachePage(
    //   title: "6",
    // ),
  ];

  @override
  Widget build(BuildContext context) {
    List<BottomNavigationBarItem> listBottom = [];
    int index = 1;
    for (var _ in listPage) {
      listBottom.add(BottomNavigationBarItem(
        icon: const Icon(Icons.access_alarm_rounded),
        label: "$index",
      ));
      index++;
    }
    return Scaffold(
      appBar: AppBar(
        title: const Text('Shape效果'),
      ),
      body: PageView(
        physics: const PageScrollPhysics(),
        controller: pageController,
        children: listPage,
        onPageChanged: (value) {
          currentIndex = value;
          _changeItem(currentIndex);
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (value) {
          setState(() {
            currentIndex = value;
            showToast("$currentIndex");
            pageController.jumpToPage(currentIndex);
          });
        },
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        // backgroundColor: Colors.yellow,
        items: listBottom,
      ),
    );
  }

  void _changeItem(int value) {
    setState(() {
      currentIndex = value;
    });
  }
}

class CachePage extends StatefulWidget {
  final String? title;
  const CachePage({Key? key, this.title}) : super(key: key);

  @override
  _CachePageState createState() => _CachePageState();
}

class _CachePageState extends State<CachePage> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    if (widget.title == "1") {
      return getOne();
    }
    return Text(widget.title!);
  }

  Widget getOne() {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView(
          children: [
            Column(
              children: [
                MaterialButton(
                  elevation: 0,
                  child: const Text("BeveledRectangleBorder-BorderSide"),
                  textColor: Colors.blue,
                  onPressed: () {},
                  shape: BeveledRectangleBorder(
                    side: const BorderSide(color: Colors.blue, width: 0.5, style: BorderStyle.solid),
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
                MaterialButton(
                  child: const Text("BeveledRectangleBorder-BorderSide"),
                  textColor: Colors.blue,
                  onPressed: () {},
                  shape: BeveledRectangleBorder(
                    side: const BorderSide(color: Colors.blue, width: 0.5, style: BorderStyle.solid),
                    borderRadius: BorderRadius.circular(30),
                  ),
                ),
                MaterialButton(
                  child: const Text("BeveledRectangleBorder-BorderSide"),
                  textColor: Colors.blue,
                  onPressed: () {},
                  shape: BeveledRectangleBorder(
                    side: const BorderSide(color: Colors.blue, width: 0.5, style: BorderStyle.solid),
                    borderRadius: BorderRadius.circular(0),
                  ),
                ),
                MaterialButton(
                    child: const Text("Border"),
                    textColor: Colors.blue,
                    onPressed: () {},
                    shape: const Border(
                      top: BorderSide(width: 2.0, color: Colors.green),
                      bottom: BorderSide(width: 2.0, color: Colors.yellow),
                      right: BorderSide(width: 2.0, color: Colors.blue),
                      left: BorderSide(color: Colors.red, style: BorderStyle.solid, width: 2.0),
                    )),
                LimitedBox(
                  child: MaterialButton(
                      child: const Text(
                        "老孟",
                        textAlign: TextAlign.center,
                      ),
                      textColor: Colors.blue,
                      onPressed: () {},
                      shape: const CircleBorder(side: BorderSide(width: 2.0, color: Colors.blue))),
                ),
                MaterialButton(
                  shape: ContinuousRectangleBorder(
                    side: const BorderSide(color: Colors.red),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: const Text(
                    'ContinuousRectangleBorder',
                    style: TextStyle(fontSize: 15),
                  ),
                  onPressed: () {},
                ),
                MaterialButton(
                  shape: const RoundedRectangleBorder(
                    side: BorderSide(color: Colors.blue),
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(20), bottomRight: Radius.circular(20)),
                  ),
                  child: const Text(
                    'RoundedRectangleBorder',
                    style: TextStyle(fontSize: 15, color: Colors.blue),
                  ),
                  onPressed: () {},
                ),
                MaterialButton(
                  shape: const RoundedRectangleBorder(
                    side: BorderSide(color: Colors.blue),
                    borderRadius: BorderRadius.horizontal(left: Radius.circular(20)),
                  ),
                  child: const Text(
                    'RoundedRectangleBorder',
                    style: TextStyle(fontSize: 15, color: Colors.blue),
                  ),
                  onPressed: () {},
                ),
                MaterialButton(
                  shape: const RoundedRectangleBorder(
                    side: BorderSide(color: Colors.blue),
                    borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
                  ),
                  child: const Text(
                    'RoundedRectangleBorder',
                    style: TextStyle(fontSize: 15, color: Colors.blue),
                  ),
                  onPressed: () {},
                ),
                MaterialButton(
                  shape: const StadiumBorder(
                    side: BorderSide(color: Colors.blue),
                  ),
                  child: const Text(
                    '足球场效果',
                    style: TextStyle(fontSize: 15, color: Colors.blue),
                  ),
                  onPressed: () {},
                ),
                MaterialButton(
                  shape: OutlineInputBorder(
                    borderSide: const BorderSide(color: Colors.red),
                    borderRadius: BorderRadius.circular(10),
                    // gapPadding: 10,
                    // borderRadius: BorderRadius.circular(10),
                  ),
                  child: const Text(
                    'OutlineInputBorder',
                    style: TextStyle(fontSize: 15, color: Colors.blue),
                  ),
                  onPressed: () {},
                ),
                MaterialButton(
                  shape: const UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.red, width: 2.0),
                    // borderRadius: BorderRadius.circular(10),
                    // gapPadding: 10,
                    // borderRadius: BorderRadius.circular(10),
                  ),
                  child: const Text(
                    'UnderlineInputBorder',
                    style: TextStyle(fontSize: 15, color: Colors.blue),
                  ),
                  onPressed: () {},
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}
